<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            background-color: red;
        }
    </style>
</head>
<body>
    <div style="width: 100px;height: 100px;" class="box"></div>
    <script>
        /*
            操作元素的样式方式一共有两种方式
                - element.style.xxx即可拿到元素的内联样式，不过仅限于内联
                - getComputedStyle(element)可以拿到元素的所有样式
            和之前一样，获取之后也是可以赋值的
        */ 

        const box = document.querySelector('.box')

        console.log(box.style.width)

        // 要注意，因为在js中对于"-"这个符号是不允许出现在变量名字里的，所以css中的类似于background-color这种属性是不允许直接写的，要写成驼峰式也就是backgroundColor这种的，也可以写成["background-color"]这种方式不过有点麻烦
        console.log(getComputedStyle(box).backgroundColor)

    </script>
</body>
</html>